const video = document.getElementById('videoPlayer');
const playButton = document.getElementById('playButton');
const currentTimeDisplay = document.getElementById('currentTime');
const durationDisplay = document.getElementById('duration');
const seekBar = document.getElementById('seekBar');
const rewindButton = document.getElementById('rewindButton');
const fastForwardButton = document.getElementById('fastForwardButton');
const muteButton = document.getElementById('muteButton');
const volumeControl = document.getElementById('volumeControl');

let videoVolumn

function playpause() {
    if (video.paused) {
        video.play();
        playButton.className = "iconfont icon-suspended-fill "
        // playButton.innerHTML = '<img src="pause-icon.png" alt="Pause">';
    } else {
        video.pause();
        playButton.className = "iconfont icon-play-fill"
        // playButton.innerHTML = '<img src="play-icon.png" alt="Play">';
    }
}
// Play/Pause button
playButton.addEventListener('click', () => {
    playpause()
});
video.addEventListener('click', () => {
    playpause()
});

// Seek bar
seekBar.addEventListener('input', () => {
    video.currentTime = seekBar.value * video.duration / 100;
});

// Rewind button
rewindButton.addEventListener('click', () => {
    video.currentTime -= 10;
    updateSeekBar();
});

// Fast forward button
fastForwardButton.addEventListener('click', () => {
    video.currentTime += 10;
    updateSeekBar();
});


// Mute button
muteButton.addEventListener('click', () => {
    if (video.muted) {
        video.muted = false;
        muteButton.className = "iconfont icon-sound-filling-fill";
        volumeControl.value = videoVolumn
    } else {
        video.muted = true;
        muteButton.className = "iconfont icon-sound-Mute1";
        videoVolumn = volumeControl.value
        volumeControl.value = 0;
    }
});

// Volume control
volumeControl.addEventListener('input', () => {
    video.volume = volumeControl.value;
});

// Update time displays and seek bar
function updateTimeDisplays() {
    const minutes = Math.floor(video.currentTime / 60);
    const seconds = Math.floor(video.currentTime % 60);
    currentTimeDisplay.textContent = `${minutes}:${seconds.toString().padStart(2, '0')}`;

    const totalMinutes = Math.floor(video.duration / 60);
    const totalSeconds = Math.floor(video.duration % 60);
    durationDisplay.textContent = `${totalMinutes}:${totalSeconds.toString().padStart(2, '0')}`;
}

function updateSeekBar() {
    seekBar.value = (video.currentTime / video.duration) * 100;
}

// Update time displays on video time change
video.addEventListener('timeupdate', () => {
    updateTimeDisplays();
    updateSeekBar();
});

// Initial setup
video.addEventListener('loadedmetadata', () => {
    updateTimeDisplays();
    updateSeekBar();
});